// 评论列表组件
import classNames from 'classnames';
// 导入图片
import avatar from './avatar.jpeg';

export const CommentList = ({ list, changeAttitude, delComment }) => {
  return (
    // 评论列表区
    <div className="comment-list">
      {list.map((item) => {
        return (
          <div className="comment-item" key={item.id}>
            <div>
              <img className="user-head" src={avatar} alt="头像" />
            </div>

            <div className="comment">
              <div className="user">{item.author}</div>
              <p className="text">{item.comment}</p>
              <div className="info">
                {/* JS 日期对象原生的转化方法 */}
                <span className="time">
                  {typeof item.time === 'string'
                    ? item.time
                    : item.time.toLocaleString()}
                </span>
                <span
                  className={classNames({
                    like: true,
                    liked: item.attitude === 1,
                  })}
                  onClick={() =>
                    changeAttitude(item.id, item.attitude === 1 ? 0 : 1)
                  }
                >
                  <i className="icon" />
                </span>
                <span
                  className={classNames({
                    hate: true,
                    hated: item.attitude === -1,
                  })}
                  onClick={() =>
                    changeAttitude(item.id, item.attitude === -1 ? 0 : -1)
                  }
                >
                  <i className="icon" />
                </span>
                <span className="btn-hover" onClick={() => delComment(item.id)}>
                  删除
                </span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

// export class CommentList extends Component {
//   render() {
//     return (
//       // 评论列表区
//       <div className="comment-list">
//         {this.props.list.map((item) => {
//           return (
//             <div className="comment-item" key={item.id}>
//               <div>
//                 <img className="user-head" src={avatar} alt="头像" />
//               </div>

//               <div className="comment">
//                 <div className="user">{item.author}</div>
//                 <p className="text">{item.comment}</p>
//                 <div className="info">
//                   {/* JS 日期对象原生的转化方法 */}
//                   <span className="time">
//                     {typeof item.time === 'string'
//                       ? item.time
//                       : item.time.toLocaleString()}
//                   </span>
//                   <span
//                     className={classNames({
//                       like: true,
//                       liked: item.attitude === 1,
//                     })}
//                     onClick={() =>
//                       this.props.changeAttitude(
//                         item.id,
//                         item.attitude === 1 ? 0 : 1
//                       )
//                     }
//                   >
//                     <i className="icon" />
//                   </span>
//                   <span
//                     className={classNames({
//                       hate: true,
//                       hated: item.attitude === -1,
//                     })}
//                     onClick={() =>
//                       this.props.changeAttitude(
//                         item.id,
//                         item.attitude === -1 ? 0 : -1
//                       )
//                     }
//                   >
//                     <i className="icon" />
//                   </span>
//                   <span
//                     className="btn-hover"
//                     onClick={() => this.props.delComment(item.id)}
//                   >
//                     删除
//                   </span>
//                 </div>
//               </div>
//             </div>
//           );
//         })}
//       </div>
//     );
//   }
// }

export default CommentList;
